<%-- 
    Document   : register
    Created on : Feb 8, 2012, 6:21:35 PM
    Author     : Alex
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
        <style type="text/css">
body {
	background-color: #000;
	background-image: url(bg.jpg);
	background-repeat: repeat-x;
}
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 7pt;
	color: #FFF;
}

#half1{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 7pt;
    position: absolute;
    top: 50px;
    left: 400px;
    text-align: center;
}

#half2{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 7pt;
    position: absolute;
    top: 100px;
    left: 700px;
    text-align: center;
}
h1 { font-family:Verdana, Geneva, sans-serif; font-size:24; text-align:center;}
h2 { font-family:Verdana, Geneva, sans-serif; font-size:10; color:white;}
h3 { font-family:Verdana, Geneva, sans-serif; font-size:30; color:white; text-align:center;}

input.groovybutton
{
   font-size:10px;
   font-family:Verdana,sans-serif;
   font-weight:bold;
   color:#000000;
   width:100px;
   height:30px;
   background-color:#FFFF33;
   border-style:groove;
   border-color:#FFFF66;
}

</style>



   </style>
   <script language = "Javascript" type="text/javascript">

function goLite(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
   window.document.forms[FRM].elements[BTN].style.backgroundColor = "#444444";
   window.document.forms[FRM].elements[BTN].style.borderStyle = "outset";
   window.document.forms[FRM].elements[BTN].style.borderColor = "#444444";
}

function goDim(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color = "#000000";
   window.document.forms[FRM].elements[BTN].style.backgroundColor = "#FFFF33";
   window.document.forms[FRM].elements[BTN].style.borderStyle = "groove";
   window.document.forms[FRM].elements[BTN].style.borderColor = "#FFFF66";
}


function OnBlurInput(blur){

			if(blur.value == "")
			{
		    blur.value = "";
			}

}

function OnBlurInputPass(blur){

			if(blur.value == "")
			{
		    blur.value = "";
			}

			if(blur.value == "Password" || blur.value == "Retype Password" )
			{
			blur.type = "text";
			blur.value = blur.defaultValue;
			}


}

function OnClickInput(click){

			if(click.value == click.defaultValue )
			{
				click.value = "";
			}


}

function OnClickInputPass(click){

			if(click.value == click.defaultValue )
			{
				click.value = "";
			}
			if(click.type == "text")
			{
			click.type = "password";

			}

}
</script>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>FooBar Bookstore</title>
    </head>
    <body>
        <h1>FooBar Registration Page</h1>
<td height="69" colspan="2"><form name="assign" method="post" action="AddUserServlet"> 
 
<div id="half1">
<h2>Username:</h2><input id="textbox" type="text" name="username" value="Username" size="30"  onblur="OnBlurInput(this),user()" onclick="OnClickInput(this)"/> <p id= 'error'>   </p></br><br>
<h2>Password:</h2><input id="textbox" type="text" name="password" value="Password" size="30"  onblur="OnBlurInputPass(this),password()" onclick="OnClickInputPass(this)"  /><p id= 'passerror'>  </p></br><br>
<h2>Billing/Delivery Address:</h2><input id="textbox" type="text" name="address"  value="Address" size="30"  onblur="OnBlurInputPass(this), repassword()" onclick="OnClickInputPass(this)"   ><p id= 'passerror'>  </p></br>
<h2>First Name:</h2><input id="textbox" type="text" name="firstname" value="Firstname" size="30" onblur="OnBlurInput(this),firstname()()" onclick="OnClickInput(this)" /><p id= 'nameerror'> </p></br ><br>
<h2>Middle Name:</h2><input id="textbox" type="text" name="middlename" value="Middlename" size="30"  onblur="OnBlurInput(this),address()" onclick="OnClickInput(this)"> <p id= 'emailerror'>  </p></br><br>
<h2>Last Name:</h2><input id="textbox" type="text" name="lastname" value="Lastname" size="30"  onblur="OnBlurInput(this),address()" onclick="OnClickInput(this)"> <p id= 'emailerror'>  </p></br><br>
</div>

<div id="half2">
<td height="69" colspan="2">
<h2>Credit Card Name:</h2><input id="textbox" type="text" name="creditname"  value="Email" size="30" onblur="OnBlurInput(this),address()"  onclick="OnClickInput(this)" /><p id= 'emailerror'> </p></br ><br/>
<h2>Expiration Date:</h2><input id="textbox" type="text" name="expdate"  value="Phone Number" size="30" onblur="OnBlurInput(this),address()"  onclick="OnClickInput(this)" /><p id= 'phoneerror'> </p></br ><br/>
<h2>Credit Card Type:</h2>
<select name ="credittype">
    <option value="Visa"> Visa </option>
    <option value="Mastercard"> Mastercard </option>

 </select></br></br></br></br></br></br></br>


<input type="submit"    name="groovybtn1"    class="groovybutton"    value="Register"       onMouseOver="goLite(this.form.name,this.name)"    onMouseOut="goDim(this.form.name,this.name)"    value="Register!">
</div>
</form>
        
    </body>
</html>
